<template>
  <el-upload
    v-bind="inputInfo.inputAttrs"
    :action="addHostname('/upload')"
    :headers="{ Authorization: `Bearer ${token}` }"
    list-type="picture"
    :on-success="onSuccess"
    :before-remove="beforeRemove"
    multiple
  >
    <el-button type="primary" icon="el-icon-upload">点击上传</el-button>
  </el-upload>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "CommonUpload",
  props: {
    inputInfo: {
      type: Object,
      default: {},
    },
  },
  setup(props, { emit }) {

    let dialogImageUrl = ref(""), dialogVisible = ref(false), disabled = ref(false)
    const paths = [];

    //图片删除
    const beforeRemove = (file, fileList) => {
      let targetIndex = fileList.findIndex(item => item.uid === file.uid)
      paths.splice(targetIndex, 1)
    };

    //上传成功回调
    const onSuccess = (response) => {
      paths.push(response.data.path)
      emit('update:modelValue', paths.join(','))
    }

    return {
      token: ref(sessionStorage.getItem('token')),
      dialogImageUrl,
      dialogVisible,
      disabled,
      onSuccess,
      beforeRemove,
    };
  },
});
</script>

<style scoped>
.preview {
  width: 100%;
}
</style>